import React from "react";
import Container from "../components/Base/Container";
import {
  List,
  SearchBar,
  Tabs,
  WhiteSpace,
  Badge,
  Picker,
  Switch,
  WingBlank,
  ListView,
} from "antd-mobile";
import styles from "./WifiPeopleList.less";
import MyIcon from '../components/Base/MyIcon';
import VipListShow from '../components/Base/VipListShow';
import request from '../utils/request';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';


const Item = List.Item;

class WifiPeopleList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      page: 0,
      refreshing: false,
      isLoading: false,
      hasMore: true,
      show: false,
      value: "",
      selectValue: [2, 0],
      filter: {},
      searchKey: "",
      vips: [],
    };
  }

  componentDidMount() {
    const params = this.props.location;
    const { branchNo, shopId } = this.props.currentUser;

    const type = params.query.type || 'reception';

    const self = this;
    request('/wifiPeopleList', {
      params: {
        type,
        branchNo,
        shopId,
      },
    })
      .then((data) => {
        self.setState({
          vips: data.data.vips,
        });
      });
  }

  onSearch() {
    console.log("on search");
  }

  onCancel() {
    console.log("on cancel");
  }

  render() {
    const params = this.props.location;
    console.log("params", params);

    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    // dataSource.cloneWithRows(this.state.vips);
    return (
      <Container title={"我的会员"}>
        <div>
          <div className={styles.search}>
            <WingBlank size="sm">
              <SearchBar
                placeholder="输入手机号或卡号或姓名"
                onSubmit={this.onSearch}
                onCancel={this.onCancel}
                value={this.state.searchKey}
                onChange={(text) => {
                  this.setState({
                    searchKey: text,
                  });
                }}
              />
            </WingBlank>
          </div>
          <WingBlank size="sm">
            <WhiteSpace size="sm"/>

            <ListView
              dataSource={dataSource.cloneWithRows(this.state.vips)}
              renderRow={this.renderRow}
              renderSeparator={null}
              renderFooter={() => (
                <div
                  style={{ padding: 15, textAlign: "center" }}
                >
                  已全部加载完
                </div>
              )}
              renderHeader={() => (
                <div size="small">
                  <MyIcon
                    type="trips"
                    color="#ff2828"
                    size="xxs"
                    style={{ position: "relative", top: 2, marginRight: 8 }}
                  />
                  总计：{" "}
                  <span style={{ color: "red" }}>{this.state.vips.length} 人</span>{" "}
                  {this.state.label}
                </div>
              )}
              //   initialListSize={this.props.vips.data.length}
              pageSize={20}
              scrollRenderAheadDistance={200}
              scrollEventThrottle={20}
              useBodyScroll
              style={{ marginBottom: -60 }}
            />
          </WingBlank>
        </div>
      </Container>
    );
  }

  renderRow = (rowData, sectionID, rowID) => {
    return (
      <VipListShow
        rowData={rowData}
        click={() => {
          this.props.toVipInfoPage(rowData.card_no, rowData.card_id, this.props.location.query);
        }}
      />
    );
  };
}

export default connect(
  (state) => {
    return {
      currentUser: state.auth.currentUser,
    };
  },
  (dispatch) => {
    return {
      toVipInfoPage(cardNo, cardId) {
        dispatch(routerRedux.push({
          pathname: '/vipInfo',
          query: { cardNo, cardId },
        }));
      },
    };
  })(WifiPeopleList);
